<template>
<el-container class="home_container">
    <!--    头部-->
    <el-header>
      <div class="home_title">
        <div class="svg"></div>
        <div class="headTitle">应急事件后台管理系统</div>
      </div>
      <div class="home_userinfoContainer">
        <!--        下拉总管理事件 handle-->
        <el-dropdown @command="handle">
          <span class="el-dropdown-link home_userinfo">
            {{ currentUserName}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="sysMsg">设置地区</el-dropdown-item> -->
            <!-- <el-dropdown-item command="MyArticle">我的文章</el-dropdown-item>
            <el-dropdown-item command="MyHome">个人主页</el-dropdown-item> -->
            <el-dropdown-item command="logout" divided
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span style="margin-left: 20px"><i class="el-icon-location-outline">&nbsp;</i>武汉市</span>
      </div>
    </el-header>

      <!-- 内容部分 -->
    <el-main>
        <div class="goods">
            <div class="taskGroups">
             <div class="title">救援任务列表</div>
             <div class="list">
                <div class="event" v-for="item in theTasks" :key="item.$index">
                   <div>编号:{{item.taskId}}</div>
                   <p>描述:{{item.taskDescription}}</p>
                   <div class="btn">
                      <el-button type="primary" size="medium" plain @click="checkGoods(item.taskId)">查看物资情况</el-button>
                   </div>
                </div>
             </div>
            </div>
            <div class="goodsList">
                <div class="title">物资情况--任务编号:{{nowTaskId}}</div>
                <div class="list">
                 <el-table
                   :data="theGoods"
                   border
                   style="width: 100%">
                   <el-table-column prop="materialId" label="编号" width="100"> </el-table-column>
                   <el-table-column  prop="description"  label="物资名称"  width="160"></el-table-column>
                   <el-table-column  prop="requestQuantity"  label="需要数量" width="100"></el-table-column>
                   <el-table-column  prop="provideQuantity"  label="当前数量"  width="100"></el-table-column>
                   <el-table-column  prop="taskId"  label="任务编号" ></el-table-column>
                   <el-table-column  prop="taskType"  label="任务类型" ></el-table-column>
                    <el-table-column  label="操作"  width="130">
                       <template slot-scope="scope">
                         <el-button
                           type="primary" plain
                           size="small"
                           @click="getDetail(scope.row)">查看详情</el-button>
                       </template>
                     </el-table-column>
                 </el-table>
                </div>
            </div>
            <div class="goodsDetail" ref="goodsShrink">
                 <div style="width:100%;height: 40px;text-align: right;box-sizing: border-box;">
                   <el-button size="small" icon="el-icon-close" circle @click="pushImg"></el-button>
                 </div>
                 <div class="detailList">
                    <el-table
                   :data="theDetails"
                   border
                   style="width: 100%">
                   <el-table-column prop="id" label="编号" width="50"> </el-table-column>
                   <el-table-column prop="requestPhone" label="电话号码" width="160"> </el-table-column>
                   <el-table-column  prop="quantity"  label="需要数量" width="100"></el-table-column>
                    <el-table-column  label="操作"  >
                       <template slot-scope="scope">
                         <el-button
                           type="primary" plain
                           size="small"
                           :disabled="scope.row.status==1"
                           @click="receive(scope.row)">{{btnName(scope.row)}}</el-button>
                       </template>
                     </el-table-column>
                 </el-table>
                 </div>
            </div>
        </div>
    </el-main>
  </el-container>
</template>
<script>
import { getRequest } from "../utils/api";
import { putRequest } from "../utils/api";
import "../css/GoodsManage.css"
import TaskCard from "@/components/TaskCard.vue";
import * as echarts from 'echarts';
import axios from 'axios'


export default {
    data() {
        return {
           currentUserName:"物资调配员",
           theTasks:[],
           theGoods:[],
           theDetails:[],
           nowTaskId:0,
           hideFlag:true
        };
    },
    mounted: function () {
         axios.get('/getTasks?type=flood').then((resp) => {
          if (resp.status == 200) {
            this.theTasks = resp.data[0].reverse();
            console.log(this.theTasks);
            if(this.theTasks!=[]){
                this.checkGoods(this.theTasks[0].taskId)
            }
           }
         }).catch(err=>{
           console.log(err)
         })
    },
    computed:{
        
    },
    methods: {
        btnName(row){
            if(row.status==0){
             return "分配"
            }else{
             return "已分配"
            }
        },
        pushImg(){
          if(this.hideFlag){
            // console.log(this.$refs.detailShrink);
            this.$refs.goodsShrink.style.left="-20px";
            this.hideFlag=false;
          }
          else{
            this.$refs.goodsShrink.style.left="-460px"
            this.hideFlag=true;
        }
       },
        receive(row){
          axios.get('/material/updateStatusById?id='+row.id).then((resp) => {
             if (resp.status == 200) {
               this.$message({
               message: '分配成功',
               type: 'success'
               });  
               row.status=1
              }
            }).catch(err=>{
              console.log(err)
            })
        },
        getDetail(row){
            console.log(row);
            axios.get('/material/getMaterialInfo?taskId='+this.nowTaskId+'&taskType=flood&description='+row.description).then((resp) => {
              if (resp.status == 200) {
                this.theDetails = resp.data;
                console.log(this.theDetails);
                this.$message({
                message: '获取详情成功',
                type: 'success'
                });  
                this.$refs.goodsShrink.style.left="-20px";
                this.hideFlag=false;
               }
             }).catch(err=>{
               console.log(err)
             })
            
        },
        checkGoods(id){
            this.nowTaskId=id
            axios.get('/material/getTaskMaterials?taskId='+id+'&taskType=flood').then((resp) => {
              if (resp.status == 200) {
                this.theGoods = resp.data;
                console.log(this.theGoods);
                if(this.theGoods.length==0){
                  this.$message({
                    message: '该任务暂无物资',
                });
                }
               }
             }).catch(err=>{
               console.log(err)
             })
            },
         handle(command) {
      //右侧下拉框事件
           let _this = this;
           if (command == "logout") {
             this.$confirm("注销登录吗?", "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning",
             }).then(
               function () {
                 //getRequest("/logout")
                 //_this.currentUserName = '游客';
                 _this.$router.replace({ path: "/" }); //跳回登录界面
               },
               function () {
                 //取消
               }
             );
           }
         },
       
    },    
    components: {TaskCard: TaskCard}
};
</script>
